<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        .namespace {
            margin-top: 10px;
        }
        .namespace select, .namespace option{
            width: 150px;
            height: 40px;
            font-size: 15px;
        }
        /*表格内溢出自动换行*/
        .layui-table-cell {
            height: 100%;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin ">
  <div class="layui-header layui-bg-cyan">
    <div class="layui-logo layui-hide-xs layui-bg-cyan" style="font-size: 20px;font-weight: bold">K8s管理平台</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
        <div class="namespace">
            <select name="namespace" id="nsSelect">
{#                <option value="test1">test1</option>#}
            </select>
        </div>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="/login">注销</a>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black ">
    <div class="layui-side-scroll layui-bg-cyan">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test">
       <li class="layui-nav-item {% block nav-item-0 %}{% endblock %}"><a href="/"><i class="layui-icon layui-icon-home" style="color: #2D93CA"></i>&nbsp;&nbsp;首页看板</a></li>

        <li class="layui-nav-item {% block nav-item-1 %}{% endblock %}">
          <a href="javascript:;"><i class="layui-icon layui-icon-snowflake" style="color: #2D93CA">&nbsp;&nbsp;</i>Kubernetes</a>
          <dl class="layui-nav-child">
            <dd class="{% block nav-child-1-1 %}{% endblock %}"><a href="{% url 'node' %}">Nodes</a></dd>
            <dd class="{% block nav-child-1-2 %}{% endblock %}"><a href="{% url 'namespace' %}">Namespaces</a></dd>
            <dd class="{% block nav-child-1-3 %}{% endblock %}"><a href="{% url 'pv' %}">PersistentVolumes</a></dd>
          </dl>
        </li>

        <li class="layui-nav-item {% block nav-item-2 %}{% endblock %}">
          <a href="javascript:;"><i class="layui-icon layui-icon-list" style="color: #2D93CA">&nbsp;&nbsp;</i>工作负载</a>
          <dl class="layui-nav-child">
            <dd class="{% block nav-child-2-1 %}{% endblock %}"><a href="{% url 'deployment' %}">Deployments</a></dd>
            <dd class="{% block nav-child-2-2 %}{% endblock %}"><a href="{% url 'daemonset' %}">DaemonSets</a></dd>
            <dd class="{% block nav-child-2-3 %}{% endblock %}"><a href="{% url 'statefulset' %}">StatefulSets</a></dd>
            <dd class="{% block nav-child-2-4 %}{% endblock %}"><a href="{% url 'pod' %}">Pods</a></dd>
          </dl>
        </li>

        <li class="layui-nav-item {% block nav-item-3 %}{% endblock %}">
          <a href="javascript:;"><i class="layui-icon layui-icon-component" style="color: #2D93CA">&nbsp;&nbsp;</i>负载均衡</a>
          <dl class="layui-nav-child">
            <dd class="{% block nav-child-3-1 %}{% endblock %}"><a href="{% url 'service' %}">Services</a></dd>
            <dd class="{% block nav-child-3-2 %}{% endblock %}"><a href="{% url 'ingress' %}">Ingresses</a></dd>
          </dl>
        </li>

        <li class="layui-nav-item {% block nav-item-4 %}{% endblock %}">
          <a href="javascript:;"><i class="layui-icon layui-icon-file" style="color: #2D93CA">&nbsp;&nbsp;</i>存储与配置</a>
          <dl class="layui-nav-child">
            <dd class="{% block nav-child-4-1 %}{% endblock %}"><a href="{% url 'pvc' %}">PersistentVolumeClaims</a></dd>
            <dd class="{% block nav-child-4-2 %}{% endblock %}"><a href="{% url 'configmap' %}">ConfigMaps</a></dd>
            <dd class="{% block nav-child-4-3 %}{% endblock %}"><a href="{% url 'secret' %}">Secrets</a></dd>
          </dl>
        </li>

      </ul>
    </div>
  </div>

  <div class="layui-body" style="background-color: #eeeeee">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;"> {% block content %}{% endblock %}</div>

  </div>

{#  <div class="layui-footer" style="text-align: center">#}
{#    <!-- 底部固定区域 -->#}
{#    <a href="https://www.qikqiak.com/k8strain/" target="_blank">容器学院</a>#}
{#  </div>#}
</div>
<script src="/static/layui/layui.js"></script>
<script>
layui.use(['layer'], function(){
    var layer = layui.layer;
    var $ = layui.jquery;
    $.ajax({
        type: "GET",
        async: false,
        url: "{% url 'namespace_api' %}",
        success: function (res) {
            if(res.code == 0){
                for(let index in res.data) {
                    row = res.data[index];
                    $('#nsSelect').append('<option value=' + row.name + '>' + row.name + '</option>')
                }
                // 设置默认命名空间
                //$('#nsSelect').val('default')
            } else {
                layer.open({
                    type: 0,
                    title: ['命名空间查询失败'],
                    content: '<span style="color:red;font-size: 18px">' + res.msg + '</span>'
                })
            }
        },
        error: function () {
            layer.open({
                type: 0,
                title: ['异常信息'],
                content: "获取命名空间列表失败！请检查K8s集群地址或者服务器！"
            })
        }
    });
    // 将当前选择的命名空间保存到本地浏览器session存储，以便其他页面能获取到当前选择的命名空间
    var storage = window.sessionStorage;
    var namespace = storage.getItem('namespace');
    var current_ns = $("#nsSelect").val();

    // 如果本地存储为空，将当前命名空间存储
    if (namespace == null) {
        storage.setItem('namespace', current_ns); // 添加键值，读取 storage.getItem('namespace')
    } else {
        $("#nsSelect").val(namespace);
    }

    // 选择命名空间触发
    $("#nsSelect").change(function () {
        current_ns = $("#nsSelect").val(); // 获取选择的值
        storage.setItem('namespace', current_ns); // 添加键值
        location.reload()
    });
});
</script>
{% block js %}{% endblock %}
</body>
</html></html>